<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:系统参数设置组件
* @fileName:config-details.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-5-24
!-->
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { Check } from "@element-plus/icons-vue";
//引入调用接口方法
import { getCurrentInstance } from "vue";
import { showErrorMessage, showSuccessMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;
//定义参数
const EmailValue = ref(false);
const MessageValue = ref(false);
const labelPosition = ref("right");
const popoverColor = ref("");
//任务日志数组
// const levelList = reactive([
// { title: "基本（Basic）", color: "#5371e1" },
// { title: "详细（Detailed）", color: "#53bae1" },
// { title: "调试（Debug）", color: "#9f53e1" },
// { title: "行级日志（Row level）", color: "#53e1ba" },
// { title: "最小日志（Minimal）", color: "#89de09" },
// { title: "错误（ERROR）", color: "#d93939" },
// { title: "没有日志（Nothing）", color: "#dbdbdb" },
// ]);
const levelList = reactive({
  list: [] as any,
});
const emailList = reactive({
  list: [] as any,
});
const messageList = reactive({
  list: [] as any,
});
//颜色选择数组
const predefineColors = reactive([
  { checked: false, color: "#5371e1" },
  { checked: false, color: "#53bae1" },
  { checked: false, color: "#9f53e1" },
  { checked: false, color: "#53e1ba" },
  { checked: false, color: "#89de09" },
  { checked: false, color: "#d93939" },
  { checked: false, color: "#dbdbdb" },
]);
const formLabelAlign = reactive({
  adress: "",
  name: "",
  password: "",
  port: "",
  id: "",
});

/**
 * @description:切换颜色
 * @param {any} value
 * @return void
 */
const changeColor = (value: any) => {
  predefineColors.map((changeItem) => {
    changeItem.checked = false;
  });
  value.checked = true;
  levelList.list.forEach((item: any) => {
    if (item.dictName === popoverColor.value) {
      item.dictValue = value.color;
    }
  });
};

/**
 * @description:点击颜色框
 * @param {any} item
 * @return void
 */
const clickPopover = (item: any) => {
  popoverColor.value = item.dictName;
  predefineColors.forEach((colorItem) => {
    if (colorItem.color === item.dictValue) {
      colorItem.checked = true;
    } else {
      colorItem.checked = false;
    }
  });
};

/**
 * @description:获取颜色
 * @return void
 */
const getParam = () => {
  const res = proxy.$HTTP.post({
    url: `/dictionary/org/getDictValueListByCodeList`,
    data: ["LogLevel", "EmailConfig", "MessageConfig"],
  });
  res.then((res: any) => {
    if (res.isOk) {
      levelList.list = res.data["LogLevel"];
      emailList.list = res.data["EmailConfig"];
      messageList.list = res.data["MessageConfig"];
      emailList.list.map((item: any) => {
        if (item.dictCode === "0") {
          if (item.dictValue === "1") {
            EmailValue.value = true;
          } else {
            EmailValue.value = false;
          }
        }
        if (item.dictCode === "1") {
          formLabelAlign.adress = item.dictValue;
        }
        if (item.dictCode === "2") {
          formLabelAlign.name = item.dictValue;
        }
        if (item.dictCode === "3") {
          formLabelAlign.password = item.dictValue;
        }
      });
      messageList.list.map((item: any) => {
        if (item.dictCode === "0") {
          if (item.dictValue === "1") {
            MessageValue.value = true;
          } else {
            MessageValue.value = false;
          }
        }
        if (item.dictCode === "1") {
          formLabelAlign.port = item.dictValue;
        }
        if (item.dictCode === "2") {
          formLabelAlign.id = item.dictValue;
        }
      });
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};

/**
 * @description:保存提交
 * @return void
 */
const submitForm = () => {
  if (EmailValue.value != false) {
    emailList.list[0].dictValue = "1";
  } else {
    emailList.list[0].dictValue = "0";
  }
  if (MessageValue.value != false) {
    messageList.list[0].dictValue = "1";
  } else {
    messageList.list[0].dictValue = "0";
  }
  emailList.list[1].dictValue = formLabelAlign.adress;
  emailList.list[2].dictValue = formLabelAlign.name;
  emailList.list[3].dictValue = formLabelAlign.password;
  messageList.list[1].dictValue = formLabelAlign.port;
  messageList.list[2].dictValue = formLabelAlign.id;
  const updateList = [
    ...levelList.list,
    ...emailList.list,
    ...messageList.list,
  ];
  const res = proxy.$HTTP.put({
    url: `/dictionary/org/batchUpdateDictValue`,
    data: updateList,
  });
  res.then((res: any) => {
    if (res.isOk) {
      showSuccessMessage({
        message: "保存成功",
      });
      getParam();
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};

//控制新增弹窗显隐
onMounted(() => {
  getParam();
});
</script>

<template>
  <div class="page-details">
    <div class="details-content">
      <el-descriptions title="任务日志颜色配置">
        <el-descriptions-item>
          <template #label>
            <div
              class="demo-color-block"
              v-for="(item, index) in levelList.list"
              :key="index"
            >
              <el-popover placement="top" :width="206" trigger="click">
                <template #reference>
                  <span
                    @click="clickPopover(item)"
                    class="configColor"
                    :style="{ 'background-color': item.dictValue }"
                  ></span>
                </template>
                <div
                  class="chooseColor"
                  style="
                    width: 206px;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div
                    v-for="(item, index) in predefineColors"
                    :key="index"
                    style="padding: 5px"
                    @click="changeColor(item)"
                  >
                    <span
                      style="
                        width: 19px;
                        height: 19px;
                        float: left;
                        cursor: pointer;
                        margin-right: 3px;
                        border-radius: 50%;
                      "
                      :style="{ 'background-color': item.color }"
                    >
                      <el-icon
                        color="white"
                        style="left: 3px; top: 2px"
                        v-if="item.checked"
                        ><check /></el-icon
                    ></span>
                  </div>
                </div>
              </el-popover>
              <span class="demonstration">{{ item.dictName }}</span>
            </div>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="margin-top: 15px">
        <template #title
          >发送邮件通知
          <el-switch
            style="margin-left: 10px; margin-bottom: 3px"
            inactive-color="#f2f2f6"
            v-model="EmailValue"
            class="ml-2"
            active-color="#55d66b"
          />
        </template>
        <el-descriptions-item>
          <template #label>
            <el-form
              :label-position="labelPosition"
              label-width="100px"
              :model="formLabelAlign"
              style="max-width: 700px"
            >
              <el-form-item label="邮箱地址：">
                <el-input
                  clearable
                  v-model="formLabelAlign.adress"
                  placeholder="请设置发送通知的邮箱"
                  class="inputStyle"
                />
              </el-form-item>
              <el-form-item label="邮箱账号：">
                <el-input
                  v-model="formLabelAlign.name"
                  clearable
                  placeholder="输入邮箱账号"
                  class="inputStyle"
                />
              </el-form-item>
              <el-form-item label="邮箱密码：">
                <el-input
                  v-model="formLabelAlign.password"
                  placeholder="输入邮箱密码"
                  type="password"
                  clearable
                  show-password
                  class="inputStyle"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="margin-top: 15px">
        <template #title
          >发送短信通知
          <el-switch
            style="margin-left: 10px; margin-bottom: 3px"
            inactive-color="#f2f2f6"
            v-model="MessageValue"
            class="ml-2"
            active-color="#55d66b"
          />
        </template>
        <el-descriptions-item>
          <template #label>
            <el-form
              :label-position="labelPosition"
              label-width="100px"
              :model="formLabelAlign"
              style="max-width: 700px"
            >
              <el-form-item label="请求域名：">
                <el-input
                  clearable
                  v-model="formLabelAlign.port"
                  placeholder="请设置短信发送平台的请求域名"
                  class="inputStyle"
                />
              </el-form-item>
              <el-form-item label="身份认证：">
                <el-input
                  clearable
                  v-model="formLabelAlign.id"
                  placeholder="请输入短信平台鉴权参数"
                  class="inputStyle"
                />
              </el-form-item>
            </el-form>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-button
        size="large"
        style="width: 74px; height: 40px"
        @click="submitForm"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.page-details {
  margin-top: 15px;
  .details-content {
    padding-top: 30px;
    padding-left: 50px;
    .configColor {
      width: 27px;
      height: 22px;
      margin-bottom: 1px;
      cursor: pointer;
    }
    .demo-color-block {
      display: flex;
      align-items: center;
      float: left;
      margin-top: 35px;
      margin-left: 15px;
      .demonstration {
        margin-left: 10px;
      }
    }
  }

  :deep(.el-descriptions__title) {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  :deep(.el-color-picker__trigger) {
    border: none !important;
    width: 37px;
    height: 32px;
  }
  :deep(.el-color-picker__color) {
    border: none !important;
  }
  :deep(.el-color-picker__icon) {
    display: none;
  }
  .inputStyle {
    width: 577px;
    height: 40px;
  }
  :deep(.el-form-item__label) {
    line-height: 40px !important;
    // color: #000000;
    font-size: 14px;
  }
  .el-input {
    :deep(.el-input__wrapper) {
      height: 40px;
      border-radius: 0;
      background-color: #f2f2f6 !important;
      box-shadow: unset !important;
    }
    :deep(.el-input__suffix) {
      right: 18px;
    }
  }
}
</style>
